<template>
  <div>
    <van-nav-bar :title="goodDetalis.name" left-text="返回" @click-left="onClickLeft" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 商品信息 -->

    <el-card class="box-card">
      <van-image :src="baseUrl+goodDetalis.image" width="100%" height="300px"></van-image>
    </el-card>
    <el-card class="box-card" style="margin-top:5px">
      <van-row>
        <van-col :span="12"> <span class="decr" v-text="'¥'+goodDetalis.otPrice"></span></van-col>
        <van-col :span="12" style="text-align:right">
          <span class="decr" v-text="'销量'+(goodDetalis.sales)"></span>
          <span class="decr" v-text="'浏览量'+(goodDetalis.browse)"></span>
        </van-col>
      </van-row>
      <van-row style="margin-top:5px">
        <van-col :span="12"> <span class="decr" v-text="goodDetalis.name"></span></van-col>
      </van-row>
    </el-card>
    <!-- 规格 -->
    <el-card class="box-card" style="margin-top:5px">
      <van-row @click="shows">
        <van-col :span="12"> <span class="decr">选择规格:</span></van-col>
        <van-col :span="12" style="text-align:right">
          <van-icon name="arrow" />
        </van-col>
      </van-row>
    </el-card>
    <van-sku v-model="show" :sku="sku" :goods="goods" :goods-id="goodDetalis.id" :quota="2" :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked(goodDetalis)" @add-cart="onAddCartClicked(goodDetalis)" />
    <el-card class="box-card" style="margin-top:5px">
      <span>图文详情</span>
      <van-image :src="baseUrl+goodDetalis.image" width="100%" height="300px"></van-image>
    </el-card>
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum" to="/mycart" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="onAddCartClicked(goodDetalis)" />
      <van-goods-action-button type="danger" text="立即购买" @click="onBuyClicked(goodDetalis)" />
    </van-goods-action>
  </div>
</template>
<script>
import { getGoods } from "@/api/goods/goods";
import { addCart, mycart, updateCart } from "@/api/goods/cart";
import { Toast } from 'vant';
export default {
  data () {
    return {
      goodsList: [],
      userInfo: [],
      cartNum: null,
      id: '',
      baseUrl: '',
      obj: '',
      goodDetalis: [],
      CartList: [],
      show: false,
      sku: {
        tree: [],
        price: '999', // 默认价格（单位元）
        stock_num: 999, // 商品总库存
        none_sku: true, // 是否无规格商品
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        picture: ''
      },

    }
  },
  created: function () {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    this.getGoodsList()
  },
  methods: {
    shows () {
      this.show = true
      this.sku.price = this.goodDetalis.goodsPrice
      this.sku.stock_num = this.goodDetalis.stock
      this.goods.picture = (this.baseUrl + this.goodDetalis.image)
    },
    getGoodsList () {
      mycart({ userId: this.userInfo.id }).then(res => {
        this.CartList = res.rows
        if (res.rows.length == 0) {
          this.cartNum = null
        } else {
          this.cartNum = res.rows.length
        }
      })
      this.baseUrl = "http://localhost:8080"
      this.id = this.$route.params.id
      if (this.id == null || undefined) {
        this.goodDetalis = JSON.parse(localStorage.getItem("save"))
      } else {
        getGoods(this.id).then(res => {
          this.goodDetalis = res.data
          this.obj = res.data
          localStorage["save"] = JSON.stringify(this.obj);
        })
      }
    },
    // 加入购物车
    onAddCartClicked (index) {
      const data = {
        userId: this.userInfo.id,
        goodsId: index.id,
        goodsNum: 1
      }
      let result = true
      this.CartList.map(item => {
        if (item.goodsId == this.goodDetalis.id) {
          item.goodsNum++
          updateCart(item).then(res => {
            this.$notify({ type: 'success', message: '购物车已有该商品,该操作数量＋1' });
          })
          result = false
        }
      })
      if (result) {
        addCart(data).then(res => {
          this.getGoodsList()
        })
      }
    },
    // 购买
    onBuyClicked (index) {
      let result = []
      result.push(index)
      console.log(result)
      if (this.userInfo == null) {
        Toast.fail('请先登录...');
        setTimeout(() => {
          Toast.clear();
          this.$router.push("/login")
        }, 1000);
      } else {
        this.$router.push({ name: 'createOrder', params: { orderList: result } })
      }
    },
    onClickLeft () {
      this.$router.go(-1);
    },
  }
}
</script>
<style scoped>
</style>